<template>
    <!-- 重写购物车页面 -->
    <div class="MoneyResult page_container">
        <p class="adress" v-if="!addressjson.id&&productType=='1'" @click="toNext('addressMangeSet')">
            <img src="../../../assets/matterlineitem_icon.png@2x.png" alt="">
            <span>管理收货地址</span>
        </p>
        <div v-if="addressjson.id&&productType=='1'" style="margin-top:.6rem;">
            <div class="addressjson" v-if="addressjson.isDefault" @click="toNext('addressMangeSet')">
                <p>{{addressjson.contact | sliceString(14)}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{addressjson.phone}}</p>
                <p>{{addressjson.address | sliceString(22)}}</p>
                <div class="icob"><img src="./../../../assets/icon_click.png@2x.png" alt=""></div>
            </div>
        </div>
        <div class="imgshou">
            <img :src="imgurls" alt="">
            <div class="cont">
                <p>
                    <span class="s">{{productName | sliceString(15)}}</span>
                    <span></span>
                </p>
                <p>
                    <span>￥{{salePrice}}</span>
                    <x-number v-model="myresult.number" :min="1" :max="50" @on-change="change" class="xnumber" ref="xnumber" :fillable=t rue></x-number>
                </p>
                <p class="guige">
                    <span v-for="(item,index) in guiGe" :key="index">
                        {{item.spcname | sliceString(20)}}
                    </span>
                </p>
            </div>
        </div>
        <div class="redi" @click="clickshowquan">
            <span>商品优惠</span>
            <span v-if="voucherAmount&&(voucherAmount!=0)">-{{voucherAmount}}元</span>
            <span v-if="(!voucherAmount)||(voucherAmount==0)">
                <span v-if="mchtCouponLists.length" class="useState">{{mchtCouponLists.length?mchtCouponLists[0].couponName:''}}</span>
                <img src="../../../assets/btn_back.png" alt="">
            </span>
        </div>
        <!--优惠券选择 -->
        <mt-popup position="bottom" class="bottoms" v-model="showquan">
            <div>
                <div class="hide" @click="hidequan">选择优惠</div>
                <div class="couponChoose">
                    <div class="quans" v-for=" (item,index) in mchtCouponLists" :key='index'>
                        <div class="left">
                            <p>{{item.couponName}}</p>
                            <p class="colors">面值：{{item.denomination|denomination(item.type)}} &nbsp;&nbsp;&nbsp;
                                <span>数量：{{item.usableCount}}张</span>
                            </p>
                            <p>有效期：{{item.validatyBeginDesc}}至{{item.validatyEndDesc}}</p>
                        </div>
                        <div class="right">
                            <span @click="selectCount(index)">
                                <check-icon :value.sync="item.haveclick"></check-icon>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="wan" @click="quanok(mchtCouponLists)">完成</div>
            </div>
        </mt-popup>
        <!-- 绑定手机号   -->
        <div v-if="phoneState">
            <div class="model"></div>
            <div class="phoneTxt">
                <div class="phoneTxt_title">
                    <h3>注意</h3>
                    <h4>请填写用户名和手机号</h4>
                </div>
                <div class="phoneTxt_name"><input v-model="phoneTxt_name" type="text" placeholder="请输入用户名"></div>
                <div class="phoneTxt_phone"><input maxlength="11" v-model="phoneTxt_phone" type="text" placeholder="请输入手机号"></div>
                <div class="phoneTxt_btn">
                    <div @click="phoneState=false">取消</div>
                    <div @click="btnPhone">确定</div>
                </div>
            </div>
        </div>

        <div class="redius">
            <span>运费</span>
            <span>{{freight}}元</span>
        </div>
        <div class="rediusfour">
            <p>
                <span>商品金额111</span>
                <span>{{totalp}}元</span>
            </p>
        </div>
        <!-- <div class="rediuslast"><span>实付款:&nbsp;<span>￥</span><span>{{totalp}}</span><span v-if="Integral">+{{Integral*myresult.number}}积分</span></span></div> -->
        <div v-if="!a" class="rediuslast buttonboxs fiexd" ref="fixedbox">
            <span>实付金额:&nbsp;
                <span>￥</span>
                <span>{{totalp}}</span>
                <span v-if="Integral">+{{Integral*myresult.number}}积分</span>
            </span>
            <span class="box" @click="payMoney(addressjson.id)">确认支付</span>
        </div>
        <div v-if="!a" class="rediuslast buttonboxs fiexd" ref="fixedbox">
            <span>实付金额:&nbsp;
                <span>￥</span>
                <span>{{totalp}}</span>
            </span>
            <span class="box" @click="payMoney(addressjson.id)">确认支付</span>
        </div>
        <div v-if="a" class="rediuslast buttonboxs fiexd" ref="fixedbox">
            <span>实付金额:&nbsp;
                <span>￥</span>
                <span>{{a}}</span>
                <span v-if="Integral">+{{Integral*myresult.number}}积分</span>
            </span>
            <span class="box" @click="payMoney(addressjson.id)">确认支付</span>
        </div>
        <div v-if="a" class="rediuslast buttonboxs fiexd" ref="fixedbox">
            <span>实付金额:&nbsp;
                <span>￥</span>
                <span>{{a}}</span>
            </span>
            <span class="box" @click="payMoney(addressjson.id)">确认支付</span>
        </div>
    </div>
</template>
<script>
import { XNumber, Group, CheckIcon } from "vux";
import { MessageBox, Toast } from "mint-ui";
import {
    bindUserInfoPhone,
    sureCreateOrders,
    myProductVouchers,
    getAddressList,
    createOrder,
    integralExchangeProduct,
    hkbOrderpay,
    shoppingOrders
} from "src/methods/request.js";
import { fail } from "assert";
import { error } from "util";
import Popup from 'common/popup/popup'//弹出框样式
import mixins from 'mixins';
export default {
    mixins: [mixins],
    data() {
        return {
            route: {},
            addressjson: {},
            Integral: "",
            salePrice: "",
            productName: "",
            productNo: "",
            orderres: {},
            addshow: "",
            productType: "",
            imgurls: "",
            freight: "",
            guiGe: [],
            selectquan: [],
            showquan: false,
            a: "",
            chooseCoupon: [],
            phoneState: false,
            phoneTxt_phone: "",
            phoneTxt_name: "",
            voucherAmount: "",      //优惠多少元
            // userCouponList:[],      //用户优惠券
        };
    },
    created() {
        this.route = Object.assign({}, this.$route);
        // this.getDiscount();
    },
    computed: {
        payNum() {
            return (
                Number(this.freight) +
                this.salePrice * this.myresult.number
            ).toFixed(2);
        },
        imgUrl() {
            return this.$store._modules.root._children.a.state;
        },
        tot() {
            return (this.salePrice * this.myresult.number).toFixed(2) - 0;
        },
        totalp() {
            return (
                Number(this.freight) +
                this.salePrice * this.myresult.number
            ).toFixed(2);
        },
        myresult() {
            return this.$store.state.e.myresult;
        },
        cateNo() {
            return this.$route.query.cateNo;
        },
        //获取保存的选中商品信息 来自shopcart页面
        mchtCouponLists() {
            return this.$store.state.e.mchtCouponList;
            // return this.$store.state.e.myresult;
        },
        t(){},
        //获取确定购买的商品信息 来自商品详情的购买点击事件
        // getProductInfo(){
        //     return this.$store.state.e.myresult;
        // }
    },
    mounted() {
        console.log(this.$store.state.e.myresult)
        console.log(this.$store.state.e.mchtCouponLists)
        console.log(this.mchtCouponLists)
        this.quanok(this.mchtCouponLists);
    },
    components: {
        XNumber,
        Group,
        CheckIcon
    },
    methods: {
        btnPhone() {
            if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/.test(this.phoneTxt_phone)) {
                Toast({
                    message: "手机号码有误，请重填",
                    duration: 1000
                });
                return false;
            }
            this.$vux.loading.show({
                text: "Loading"
            });
            bindUserInfoPhone({
                phone: this.phoneTxt_phone,
                name: this.phoneTxt_name
            })
                .then(res => {
                    if (res.rspCode == "0000") {
                        this.payMoney(this.addressjson.id);
                    } else {
                        Toast({
                            message: "绑定失败",
                            position: "middle",
                            duration: 1000
                        });
                    }
                    this.phoneState = false;
                    this.$vux.loading.hide();
                })
                .catch(
                    error => (this.phoneState = false),
                    this.$vux.loading.hide()
                );
        },
        //点击立即使用优惠券
        quanok(item) {
            if(item.length == 0){
                return;
            }
            this.chooseCoupon = [];
            this.selectquan = [];
            for (var i = 0; i < item.length; i++) {
                if (item[i].haveclick) {
                    this.chooseCoupon.push({
                        couponNo: item[i].couponNo,
                        userCouponNo: item[i].userCouponNo
                    });
                }
            }

            var parmas = {
                addressId: this.addressjson.id,
                productNo: this.cateNo,
                buyNumber: this.myresult.number,
                specGroupId: this.myresult.specString,
                specList: this.myresult.specListp,
                vouchersList: this.chooseCoupon,
                userCouponNo: this.mchtCouponLists[0].userCouponNo,
                bonusAmount: ""
            }
            sureCreateOrders(parmas).then(res => {
                if (res.data.resultCode == "00") {
                    this.a = res.data.payTotalAmount.toFixed(2);
                    this.voucherAmount = res.data.voucherAmount.toFixed(2);
                } else {
                    Toast({
                        message: res.data.resultMesg,
                        position: "middle",
                        duration: 1000
                    });
                }
            });
            this.showquan = false;
        },
        clickshowquan() {
            if (this.mchtCouponLists.length != 0) {
                this.showquan = true;
            } else {
                Toast({
                    message: "暂无优惠券可选",
                    position: "middle",
                    duration: 1000
                });
            }
        },
        hidequan() {
            this.showquan = false;
        },
        change(val) {
            if (val > 50) {
                MessageBox("", "最多购买50份");
            }
            this.myresult.number = val;
            this.a = this.totalp - this.voucherAmount;
        },

        getadresslist() {
            //详情传来数据
            this.Integral = this.myresult.Integral;
            this.salePrice = this.myresult.salePrice;
            this.productName = this.myresult.productName;
            this.productNo = this.myresult.productNo;
            this.productType = this.myresult.productType;
            this.imgurls = this.myresult.imgurl;
            this.freight = this.myresult.freight;
            this.guiGe = this.myresult.specList;

            if (this.productType == "3") {
                this.addshow = false;
            } else if (this.productType == "1") {
                this.addshow = true;
            }
            //添加地址
            getAddressList({})
                .then(response => {
                    var selectid = this.route.query.id;
                    let list = Object.assign([], response.data.addressList);
                    if (!this.route.query.id) {
                        // 取默认地址
                        for (var item of list) {
                            if (item.isDefault == 0) {
                                this.addressjson = item;
                            }
                        }
                    } else {
                        for (var item of list) {
                            if (item.id == selectid) {
                                this.addressjson = item;
                            }
                        }
                    }
                })
                .catch(error => console.log(error));
        },
        // 调用支付
        goPay(myorderNo) {
            integralExchangeProduct({ orderNo: myorderNo })
                .then(response => {
                    if (response.rspCode == "0000") {
                        if (response.data.resultCode == "00") {
                            this.$router.push({
                                path: "/payMoneyEnd",
                                query: {
                                    imgurl: this.imgurls,
                                    productName: this.productName,
                                    productType: this.productType
                                }
                            });
                        } else if (response.data.resultCode == "04") {
                            if (response.data.content == undefined) {
                                MessageBox("", "支付系统异常");
                            }
                            window.open(response.data.content, "_self");
                        } else {
                            MessageBox(
                                "",
                                response.data.resultMesg || "支付失败"
                            );
                            if (this.productType == "1") {
                                this.$router.push({ path: "/Myorder" });
                            }
                        }
                    } else {
                        MessageBox("", response.rspMsg || "支付失败");
                        if (this.productType == "1") {
                            this.$router.push({ path: "/Myorder" });
                        }
                    }
                })
                .catch(error => console.log(error));
        },
        //点击确认支付，下单
        payMoney(id) {
            if (this.productType == "1") {
                if (!id) {
                    MessageBox("", "请设置地址");
                    return false;
                }
            } else {
                id = "";
            }
            this.$vux.loading.show({
                text: "Loading"
            });
            // 实物必须有默认地址id,虚拟穿空
            createOrder({
                productNo: this.productNo,
                addressId: id,
                msg: "",
                buyNumber: this.myresult.number,
                specList: this.myresult.specList,
                specGroupId: this.myresult.specString,
                vouchersList: this.chooseCoupon
            })
                .then(response => {
                    this.orderres = Object.assign({}, response.data);
                    if (response.rspCode == "0000") {
                        //取出订单号，支付
                        var myorderNo = this.orderres.orderNo;
                        if (response.data.resultCode == "01") {
                            MessageBox("", response.data.resultMesg);
                        } else if (response.data.resultCode == "04") {
                            this.phoneState = true;
                        } else if (response.data.resultCode == "00") {
                            MessageBox.confirm("", {
                                message: "确认支付"
                            })
                                .then(action => {
                                    if (action == "confirm") {
                                        if (this.orderres.isHkb == "1") {
                                            // 汇卡宝支付
                                            this.$router.push({
                                                path: "/hkbPayfrom",
                                                query: {
                                                    orderNo: myorderNo
                                                }
                                            });
                                        } else {
                                            //芸券支付
                                            this.goPay(myorderNo);
                                        }
                                    }
                                })
                                .catch(() => {
                                    Toast({
                                        message: "欢迎进入'我的订单'!",
                                        position: "middle",
                                        duration: 1000
                                    });
                                    this.$router.push({ path: "/myOrder" });
                                });
                        } else {
                            Toast({
                                message: response.data.resultMesg,
                                position: "middle",
                                duration: 1000
                            });
                        }
                        //取出订单号，支付
                    } else {
                        MessageBox("", "下单失败");
                    }
                    this.$vux.loading.hide();
                })
                .catch(error => {
                    this.$vux.loading.hide();
                    console.log(error);
                });
        },
        //保证每次只选择一个券
        selectCount(index){
            this.mchtCouponLists.map((item,ind)=>{
                if(ind != index){
                    item.haveclick = false;
                    return item;
                }
            })
        },
        //获取优惠券信息
        // getDiscount(){
            // 由于打算两个页面都使用同一个结算页，所以区分一下vuex的取值
            // let list = (this.$route.query.types || "00") == "00" ? [this.getProductInfo] : this.mchtCouponLists;
            // shoppingOrders({productList: list}).then(res=>{
            //     if(res.rspCode == "0000"){
            //         this.userCouponList = res.data.couponList.map((item,index,value)=>{
            //             item.haveclick = item.checkedCouponNo == value.checkedCouponNo;
            //             return item;
            //         })
            //     }
            // })
        // },
    },
    watch: {
        route(to, from) {
            if (this.route.path == "/goodsResult") {
                this.getadresslist();
            }
        }
    }
};
</script>
<style lang="less" scoped>
.couponChoose {
    min-height: 5rem;
    max-height: 12rem;
    width: 100%;
    overflow-y: auto;
}
.bottoms {
    width: 100%;
    padding: 0 0 10px 0;
    box-sizing: border-box;
    .hide {
        border-bottom: 1px solid #d1d1d1;
        height: 40px;
        line-height: 40px;
        width: 94%;
        margin-left: 3%;
        text-align: center;
        margin-bottom: 20px;
    }
    .quans {
        margin: 0 3% 10px;
        width: 94%;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        border-radius: 13px;
        .left {
            text-indent: 0.7rem;
            background-color: #f1f2f3;
            width: 70%;
            text-align: left;
            border-radius: 13px;
            border-right: 2px solid #ffffff;
            p {
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &:nth-of-type(1) {
                    position: relative;
                    top: 0.6rem;
                }
                &:nth-of-type(3) {
                    font-size: 0.8rem;
                }
            }
            .colors {
                color: #ed6e36;
                font-size: 0.8rem;
                position: relative;
                top: 0.7rem;
            }
        }
        .right {
            width: 30%;
            height: 90px;
            border-radius: 13px;
            background-color: #f1f2f3;
            span {
                position: relative;
                top: 34px;
                left: 15px;
            }
            p {
                display: block;
                text-align: center;
                width: 75px;
                height: 30px;
                color: #ffffff;
                line-height: 30px;
                border-radius: 10px;
                background-color: rgb(4, 0, 255);
            }
        }
    }
    .wan {
        box-sizing: border-box;
        margin-left: 3%;
        width: 94%;
        height: 40px;
        line-height: 40px;
        border-radius: 13px;
        font-size: 18px;
        color: #ffffff;
        background-color: #ed6e36;
    }
}

.xnumber {
    margin: 0px;
    margin-bottom:-4px;
    padding: 0px;
}
.xnumber:before {
    border: none;
}
.MoneyResult {
    .s {
        text-align: left;
        word-break: break-all;
        letter-spacing: 0px;
    }
    .addressno {
        height: 2rem;
        background-color: #fff;
        margin-bottom: 0.5rem;
        line-height: 2rem;
    }
    .addressjson {
        min-height: 4rem;
        padding: 10px 10px 0px 10px;
        background-color: #fff;
        box-sizing: border-box;
        margin-bottom: 0.5rem;
        position: relative;
        font-size: 1.5rem;
        p {
            width: 90%;
            min-height: 2rem;
            line-height: 2rem;
            text-align: left;
            word-break: break-all;
            letter-spacing: 0px;
            margin-bottom: .7rem;
        }
        p:nth-child(2) {
            line-height: 22px;
            padding-bottom: 20px;
        }
        .icob {
            width: 10%;
            display: block;
            position: absolute;
            top: 50%;
            right: 5px;
            margin-top: -11px;
            img {
                width: 10px;
                height: 22px;
            }
        }
    }
    .adress {
        height: 5rem;
        width: 100%;
        background-color: #fff;
        // line-height: 8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0.5rem 0 0.5rem 0;
        img {
            height: 1.8rem;
            margin-right: 0.7rem;
        }
        span {
            font-size: 15px;
            color: #ed6e36;
        }
    }
    .imgshou {
        height: 9rem;
        display: flex;
        background-color: #fff;
        align-items: center;
        padding: 0px 10px 0px 10px;
        box-sizing: border-box;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        img {
            height: 6rem;
            width: 9rem;
            border-radius: 7px;
            background-color: red;
        }
        .cont {
            width: 100%;
            height: 6.5rem;
            padding-left: 10px;
            p {
                height: 2rem;
                line-height: 2rem;
                display: flex;
                box-sizing: border-box;
                justify-content: space-between;
            }
            p:nth-child(2) {
                height: 2.5rem;
                line-height: 2.5rem;
            }
            .guige {
                justify-content: flex-start;
                span {
                    margin-right: 10px;
                }
            }
        }
    }
    .one {
        margin-bottom: 0.5rem;
        span:nth-child(2) {
            color: #ed6e36;
        }
    }
    .rediuslast {
        height: 3rem;
        display: flex;
        padding: 0px 10px 0px 10px;
        box-sizing: border-box;
        align-items: center;
        box-sizing: border-box;
        justify-content: flex-end;
        background-color: #fff;
        font-size: 13px;
        span {
            span:nth-child(1) {
                font-size: 13px;
                color: #ed6e36;
            }
            span {
                font-size: 18px;
                color: #ed6e36;
            }
        }
    }
    .redius {
        height: 4rem;
        display: flex;
        padding: 0px 10px 0px 10px;
        box-sizing: border-box;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-between;
        background-color: #fff;
        img {
            height: 30px;
            margin-top: 5px;
            transform: rotate(180deg);
        }
    }
    .redi {
        height: 4rem;
        display: flex;
        padding: 0px 10px 0px 10px;
        box-sizing: border-box;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-between;
        background-color: #fff;
        margin-bottom: 0.5rem;
        .useState {
            position: relative;
            top: -0.5rem;
            left: -0.5rem;
            color: #ffffff;
            background: #f54841;
            height: 14px;
            padding: 2px 5px;
            border-radius: 14px;
            font-size: 0.8rem;
        }
        img {
            height: 25px;
            margin-top: 5px;
            transform: rotate(180deg);
        }
    }
    .rediusfour {
        height: 3rem;
        padding: 0px 10px 0px 10px;
        box-sizing: border-box;
        background-color: #fff;
        p {
            height: 3rem;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            justify-content: space-between;
            border-bottom: 1px solid #f1f0f0;
        }
    }
    .fiexd {
        position: fixed;
        bottom: 0px;
    }
    .buttonboxs {
        width: 100%;
        height: 4rem;
        padding: 0px !important;
        margin-top: 50px;
        left: 0px;
        right: 0px;
        .box {
            margin-left: 10px;
            display: flex;
            font-size: 18px;
            align-items: center;
            height: 100%;
            width: 100px;
            justify-content: center;
            background-color: #ed6e36;
            color: #fff;
        }
    }
}
.MoneyResult::-webkit-scrollbar {
    display: none;
}
.model {
    width: 100%;
    height: 100%;
    background: #999999;
    opacity: 0.7;
    position: absolute;
    left: 0;
    top: 0;
}
.phoneTxt {
    // height: 7rem;
    text-align: center;
    position: absolute;
    top: 7rem;
    left: 10%;
    background: #ffffff;
    width: 80%;
    border-radius: 1rem;
    .phoneTxt_title {
        margin: 1rem 0 0.5rem;
        h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
    }
    .phoneTxt_name,
    .phoneTxt_phone {
        text-align: left;
        // height: 2rem;
        // line-height: 2rem;
        margin-left: 1rem;
    }
    input {
        border-bottom: 1px solid #d3d3d7;
        height: 3rem;
        width: 92%;
    }
    .phoneTxt_btn {
        & div {
            width: 50%;
            height: 3rem;
            line-height: 3rem;
            float: left;
            border-radius: 1px solid red;
        }
        div:nth-of-type(1) {
            color: #218bff;
        }
        div:nth-of-type(2) {
            background: #ff3b30;
            color: #ffffff;
            border-bottom-right-radius: 1rem;
        }
    }
}
</style>